<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/data.js" charset="utf-8"></script>
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
    <style>
        *{
            margin:0;
            padding:0;
            -ms-box-sizing:border-box;
            box-sizing:border-box;
            border:0;
        }
        .clearfix:after{
            display:table;
            clear:both;
            content:"";
        }
        .fl{
            float:left;
        }
        .fr{
            float:right;
        }
        html,body{
            height:100%;
        }
        .top{
            height:1.17rem;
            min-height:1.17rem;
            background:#f2f2f7;
            font-size:16px;
        }
        .bottom{
            position:fixed;
            bottom:0px;
            left:0px;
            right:0px;
            width:100%;
            height:1.33rem;
            background:#f2f2f7;
        }
        .cnt{
            background:white;
            height:15.3rem;
        }
        .cnt .sub_nav{
            width:2rem;
            height:100%;
            background:#f2f2f7;
            overflow-y:auto;
            font-size:14px;
        }
        .cnt .cat_list{
            overflow-y:auto;
            font-size:12px;
        }
        .sub_nav>div{
            height:1rem;
            line-height:1rem;
            text-align:center;
        }
        .div_active{
            background:white;
            color:red;
        }
        .cnt .cat_list{
            width:8rem;
            height:100%;
            background:white;
        }
        .cat{
            margin-left:0.2rem;
            margin-bottom:0.2rem;
        }
        .smallcatList{
            margin:0.5rem auto;
        }
     .jiantou{
         width:0.64rem;
         margin-top:0.27rem;
     }
        .ss{
            width:8rem;
            height:0.854rem;
            border:0.027rem solid #ccc;
            float:right;
            border-radius:0.4rem;
            margin-top:0.187rem;
            margin-right:0.8rem;
            background:white;
            line-height: .8rem;
            box-sizing: border-box;
        }
        .wenzi{
            text-align: center;
        }
        .sst{
            width:0.5rem;
            height:0.4rem;
            background:url("../images/jd-sprites.png") 3.227rem 0;
            display:block;
            background-size: 5.33rem;
            margin:0.16rem;
            vertical-align: middle;
        }
        .ss1{
            width:0.53rem;
        }
        .sr{
            width:6.67rem;
            height:0.8rem;
            line-height: .8rem;
            box-sizing: border-box;
        }


    </style>
</head>
<body>
<div class="all">
    <div class="top clearfix">
        <img class="jiantou" src="../images/download.png"/>
        <div class="ss">
            <span class="sst fl"></span>
            <input class="sr fl "/>
        </div>
    </div>
    <div class="cnt clearfix">
        <div class="sub_nav fl" id="leftnav"></div>
        <div class="cat_list fl" id="cat_list"></div>
    </div>
    <div class="bottom"></div>
</div>
<script>
    console.log(data);
    var arrs =data.json.keywordAreas;
    for(var i=0;i<arrs.length;i++){
        var a=arrs[i];
        var navLi = document.createElement("div");
        navLi.index =i;
        navLi.onclick =function(){
            loadCatData(this.index);
            clearNavLiClassName();
            this.className = "div_active";
        };
         if(i==0){
            navLi.className ="div_active";
         }
         navLi.innerHTML=a.areaName;
        leftnav.appendChild(navLi);
    }
    function clearNavLiClassName(){
        var divs = leftnav.getElementsByTagName("div");
        for(var i=0;i<divs.length;i++){
            divs[i].className="";
        }
    }
    loadCatData(0);
    function loadCatData(num){
        cat_list.innerHTML="";
        var arrs2 =arrs[num].level1words;
        for(var j=0;j<arrs2.length;j++){
            var a2=arrs2[j];
            var navLi =document.createElement("div");
            navLi.innerHTML=a2.keyword;
            navLi.style.fontWeight="700";
            navLi.style.fontSize="18px";
            cat_list.appendChild(navLi);

            var smallcatList = document.createElement("div");
            smallcatList.className = "smallcatList clearfix";
            var arrs3 =a2.level2words;
            for(var k=0;k<arrs3.length;k++){
                var a3 =arrs3[k];

                var catDiv =document.createElement("div");
                catDiv.className ="cat fl";

                catDiv.style.width ="30%";
                var imageDiv = document.createElement("img");
                imageDiv.src="http:"+a3.imageUrl;
                imageDiv.style.width ="100%";
                var txtDiv =document.createElement("div");
                txtDiv.innerHTML =a3.keyword;
                txtDiv.className="wenzi";

                txtDiv.onclick =function(){
                    location='https://so.m.jd.com/ware/search.action?keyword='+this.innerHTML
                        +'&searchFrom=category';
                };
                catDiv.appendChild(imageDiv);
                catDiv.appendChild(txtDiv);
                smallcatList.appendChild(catDiv);
            }
            cat_list.appendChild(smallcatList);
        }
    }
</script>
</body>
</html>
















